<template>
  <div>
    <!-- banner -->
    <div class="about-banner banner">
      <h1 class="banner-title">我的音乐</h1>
    </div>
    <!-- 关于我内容 -->
    <v-card class="blog-container">
      <aplayer
        :music="videoUpload.music[0]"
        :showLrc="true"
        :list="videoUpload.music"
        :listFolded="false"
      ></aplayer>
    </v-card>
  </div>
</template>

<script>
import Aplayer from "vue-aplayer";

export default {
  components: {
    Aplayer,
  },
  created() {
    this.getMusic();
  },
  data() {
    return {
      videoUpload: {
        music: [{
          title:'加载中',
					artist:'加载中',
					src:'加载中',
					pic:'',
					lrc:'[00:00.00]lrc here\n[00:01.00]aplayer'
        }],
      },
    };
  },
  methods: {
    randomColor() {
      return `#${((Math.random() * 0xffffff) << 0).toString(16)}`;
    },
    async getMusic() {
      const res = await this.$http.get("music");
      let musicArr = [];
      res.data.forEach((v) => {
        let music = {
          title: v.title,
          author: v.author,
          src: v.url,
          lrc: v.lrc,
          pic: v.pic,
          theme: this.randomColor(),
        };
        musicArr.push(music)
      });
      this.videoUpload.music = musicArr
    },
  },
};
</script>

<style scoped>
.about-banner {
  background: url(https://2u-blog.oss-cn-beijing.aliyuncs.com/%E8%83%8C%E6%99%AF%E5%9B%BE/%E9%9D%92%E7%81%AF.jpg)
    center center / cover no-repeat;
  background-color: #49b1f5;
}
.about-content {
  word-break: break-word;
  font-size: 1rem;
  line-height: 1.8;
}
</style>
